Primeros pasos con Web SDK

Aprenda cómo comenzar con Web SDK instalando los paquetes necesarios y utilizando los conectores de wagmi para usar un Embedded Wallet o un Native EOA Wallet para autenticación.

Configurando su Dapp

Para utilizar el wrapper SequenceConnect y conectar wallets web3 a su aplicación, siga estos pasos:

Web SDK está construido sobre wagmi, así que para configuraciones avanzadas, envío de transacciones, llamadas a contratos, etc., consulte la documentación de wagmi.

Aplicación Vite

1. Cree un proyecto React con Vite

   Comenzaremos creando un proyecto de React con vite:

   npm create vite
   # or
   pnpm create vite
   # or
   yarn create vite
   

2. Instale las dependencias de Web SDK

   npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
   # or
   pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
   # or
   yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
   

3. Crear una configuración

   A continuación, deberá crear una variable de configuración para SequenceConnect como waas (es decir, un Embedded Wallet).

   Primero obtenga una WaaS Config Key desde Sequence Builder y una clave de acceso al proyecto, luego asegúrese de que el origen de su proyecto esté en la lista blanca en la Configuración de Embedded Wallet en Builder. Si desea permitir WalletConnect también necesitará un Wallet Connect ID. Para configurar el inicio de sesión con Google, siga la Configuración de Google para Embedded Wallet.

   [config.ts]

   import { createConfig } from "@0xsequence/connect";
   
   export const config: any = createConfig("waas", {
     projectAccessKey: "<your-project-access-key>",
     chainIds: [1, 137],
     defaultChainId: 1,
     appName: "Demo Dapp",
     waasConfigKey: "<your-waas-config-key>", // for waas
     google: {
       clientId: "<your-google-client-id>",
     },
     walletConnect: {
       projectId: "<your-wallet-connect-project-id>",
     },
   });
   

   Para personalizar aún más, puede ver parámetros de configuración adicionales.

4. Configurar el componente Provider

   La configuración que creamos en el paso 3 debe pasarse a los providers a continuación en el main.tsx.

   [main.tsx]

   import React from "react";
   import ReactDOM from "react-dom/client";
   import "./index.css";
   
   import App from "./App";
   import { config } from "./config";
   import { SequenceConnect } from "@0xsequence/connect";
   
   function Dapp() {
     return (
       <SequenceConnect config={config}>
         <App />
       </SequenceConnect>
     );
   }
   
   ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
       <Dapp />
     </React.StrictMode>
   );
   

5. Disparar el modal de conexión

   [App.tsx]

   import './App.css'
   import { useOpenConnectModal } from '@0xsequence/connect'
   
   function App() {
     const {setOpenConnectModal} = useOpenConnectModal()
     
     return (
       <>
         <button onClick={() => setOpenConnectModal(true)}>Connect</button>
       </>
     )
   }
   
   export default App
   

   Para interacciones web3, wagmi expone un conjunto de hooks de React que facilitan funciones comunes como el envío de transacciones.